import * as api from '@/services/ipBlacklist';
import { PageContainer } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Popconfirm, Space, Tag, Tooltip } from 'antd';
import React, { useRef, useState } from 'react';
import { useModel } from 'umi';
import * as c from '@/services/consts';
import Form from './Form';
import FormIpRegion from './IpRegionForm';
import FormStat from './StatForm';
// import * as apiGroup from '@/services/vpnGroup';
import * as utils from '@/utils/utils';

const OrderList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const { hasRight } = useModel('useAuthModel');

  // const [listType, setListType] = useState<string>('1');

  const [formVisible, setFormVisible] = useState<boolean>(false);
  const [formIpRegionVisible, setFormIpRegionVisible] = useState<boolean>(false);
  const [formStatVisible, setFormStatVisible] = useState<boolean>(false);


  // const {
  //   getProductMenuItems,
  //   getSupplier,
  //   supplierOptions,
  //   getGroupAreaFilterPolicyText,
  //   getVpnGroupExTrees,
  // } = useModel('useGlobalModel', (model) => ({
  //   getProductMenuItems: model.getProductMenuItems,
  //   getSupplier: model.getSupplier,
  //   supplierOptions: model.supplierOptions,
  //   getGroupAreaFilterPolicyText: model.getGroupAreaFilterPolicyText,
  //   getVpnGroupExTrees: model.getVpnGroupExTrees,
  // }));

  let columns: ProColumns<API.IpBlacklist>[] = [
    {
      title: '类型',
      dataIndex: 'serverType',
      width: 120,
      search: false,
      sorter: true,
      render: (_, record) => {
        return c.getServerType(record.serverType)?.label;
      },
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      width: 200,
      sorter: true,
    },
    {
      title: '提供商',
      dataIndex: 'supplier',
      // width: 150,
      search: false,
      sorter: true,
    },
    // {
    //   title: '分组',
    //   dataIndex: 'groups',
    //   search: false,
    //   render: (_, record) => {
    //     if (!record.groups) {
    //       return <></>;
    //     }
    //     return record.groups.map((item) => (
    //       <Space
    //         style={{
    //           marginBottom: record.groups && record.groups.length > 1 ? 10 : 0,
    //         }}
    //       >
    //           <Tag
    //             key={`group_${item.id}`}
    //             color={
    //               item.type == c.VpnGroupType.Ghost.value ? 'green' : 'blue'
    //             }
    //           >
    //             {apiGroup.getGroupBaseTagTitle(item)}
    //           </Tag>
    //       </Space>
    //     ));
    //   },
    //   filters: [
    //     { text: c.MemberLevel.Trial.label, value: c.MemberLevel.Trial.value },
    //     { text: c.MemberLevel.Free.label, value: c.MemberLevel.Free.value },
    //     { text: c.MemberLevel.VIP.label, value: c.MemberLevel.VIP.value },
    //     { text: c.MemberLevel.Internal.label, value: c.MemberLevel.Internal.value,},
    //   ],
    // },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      // align: 'center',
      width: 200,
      // valueType:'date',
      search:false,
      sorter: true,
      render:(_, record) => {
        return utils.formatDate(record.createTime);
      }
    },
    // {
    //   title: '用户等级',
    //   dataIndex: 'memberLevel',
    //   hideInTable: true,
    //   valueType: 'select',
    //   fieldProps: {
    //     // mode: 'multiple',
    //     allowClear: true,
    //     options: c.MemberLevelOptions,
    //   },
    // },
    // {
    //   title: '服务器分组',
    //   dataIndex: 'groupId',
    //   hideInTable: true,
    //   valueType: 'treeSelect',
    //   fieldProps: {
    //     // mode: 'multiple',
    //     mode:'single',
    //     allowClear: true,
    //     showSearch: true,
    //     lineHeight: 900,
    //     treeNodeFilterProp:"title",
    //     treeData:getVpnGroupExTrees(undefined),
    //   },
    // },
    {
      title: '创建人',
      // align: 'center',
      width: 200,
      dataIndex: 'createUser',
      sorter: false,
      search: false,
    },
  ];


  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        actionRef={actionRef}
        formRef={formRef}
        search={{
          defaultCollapsed: false,
        }}
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        // toolbar={{
        //   menu: {
        //     type: 'tab',
        //     activeKey: listType,
        //     items: [{label:<b>被墙IP列表</b>, key:'1'},{label:<b>被墙IP图表</b>, key:'2'}],
        //     onChange: (tabKey) => {
        //       //console.log(tabKey as string);
        //       setListType(tabKey as string);
        //     },
        //   },
        // }}
        columns={columns}
        toolBarRender={() => {
          var toolbarDoms: any[] = [];

            toolbarDoms.push([
              <Button
                type="primary"
                onClick={() => {
                  setFormStatVisible(true);
                }}
              >
                统计图
              </Button>,
            ]);

            toolbarDoms.push([
              <Button
                type="primary"
                key="vpnserver_blockediplist"
                onClick={() => {
                  setFormVisible(true);
                }}
              >
                检查IP列表
              </Button>,
            ]);

          toolbarDoms.push([
            <Button
              type="primary"
              key="vpnserver_ipareas"
              onClick={() => {
                setFormIpRegionVisible(true);
              }}
            >
              获取IP地理信息
            </Button>,
          ]);

          return toolbarDoms;
        }}
        pagination={{
          defaultPageSize: 30,
          pageSizeOptions: ['30', '60', '100', '500'],
          hideOnSinglePage: true,
          // current: pageCurrent,
          // total: totalCount,
        }}
        request={api.blockedIpList}
      />
      <Form
        visible={formVisible}
        onCancel={() => {
          setFormVisible(false);
        }}
      />
      <FormIpRegion
        visible={formIpRegionVisible}
        onCancel={() => {
          setFormIpRegionVisible(false);
        }}
      />
      <FormStat
        visible={formStatVisible}
        onCancel={() => {
          setFormStatVisible(false);
        }}
      />
    </PageContainer>
  );
};

export default OrderList;
